<template>
	<view class="content">
		<view class="text-center">
			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">
				个人业绩
			</view>
			<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">
				销售总额
			</view>
		</view>
		<view class="item-content" v-show="Inv==0">
			<view class="item-list" v-for="(item, index) in arrList1" :key="index">
				<image :src="item.avatar || '/static/missing-face.png'"></image>
				<text class="item-name">{{item.nickname}}</text>
				<text class="dengji" v-if="item.level == 0">
					会员
				</text>
				<text class="dengji" v-else-if="item.level == 1">
					VIP
				</text>
				<text class="dengji" v-else-if="item.level == 2">
					尚街达人
				</text>
				<text class="dengji" v-else-if="item.level == 3">
					钻石达人
				</text>
				<text class="dengji" v-else-if="item.level == 4">
					皇冠达人
				</text>
				
			</view>
			<view class="but-t">(共{{ count1 }}套，VIP{{numV1}}套)</view>
			<text class="loading-text">
					{{loadingType1 === 0 ? contentText1.contentdown : (loadingType1 === 1 ? contentText1.contentrefresh : contentText1.contentnomore)}}</text>
		</view>
		<view class="item-content" v-show="Inv==1">
			<view class="item-list" v-for="(item, index) in arrList2" :key="index">
				<image :src="item.avatar || '/static/missing-face.png'"></image>
				<text class="item-name">{{item.nickname}}</text>
				<text class="item-name">({{item.son}}套)</text>
				<text class="dengji" v-if="item.level == 0">
					会员
				</text>
				<text class="dengji" v-else-if="item.level == 1">
					VIP
				</text>
				<text class="dengji" v-else-if="item.level == 2">
					尚街达人
				</text>
				<text class="dengji" v-else-if="item.level == 3">
					钻石达人
				</text>
				<text class="dengji" v-else-if="item.level == 4">
					皇冠达人
				</text>
			</view>
			<view class="but-t">销售{{count1}}套(共{{ count2 }}套)</view>
			<text class="loading-text">
					{{loadingType2 === 0 ? contentText2.contentdown : (loadingType2 === 1 ? contentText2.contentrefresh : contentText2.contentnomore)}}</text>
		</view>
	</view>
</template>
<script>
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
// import WucTab from '@/components/wuc-tab.vue';
export default {
	components: {uniLoadMore},
	data() {
		return {
			Inv:0,
			pwd: '', //旧密码
			arrList1:[],
			arrList2:[],
			page1: 1,
			page2:1,
			count1: 0,
			count2: 0,
			numV1: 0,
			numV2: 0,
			loadingType1: 0,
			contentText1: {
				contentdown: "上滑显示更多",
				contentrefresh: "正在加载...",
				contentnomore: "没有更多数据了"
			},
			loadingType2: 0,
			contentText2: {
				contentdown: "上滑显示更多",
				contentrefresh: "正在加载...",
				contentnomore: "没有更多数据了"
			}
		};
	},
	onLoad(option) {
		this.initDat(1);
	},
	components: {
		// WucTab
	},
	//下拉刷新
	onPullDownRefresh() {
		if(this.Inv == 0){
			this.page1 = 1;
			this.loadingType1 = 0
		}else if(this.Inv == 1){
			this.page2 = 1;
			this.loadingType2 = 0
		}
		this.initDat();
	},
	//触底加载
	onReachBottom() {
		if(this.Inv == 0){
			this.page1++;//每触底一次 page +1
			if (this.loadingType1 != 0) {//loadingType!=0;直接返回
				return false;
			}
			this.loadingType1 = 1;
			uni.showNavigationBarLoading();//显示加载动画
			this.$http.post('myteamzhi',{page:this.page1, limit:15}).then(res => {
				if (res.data == null || res.data == '') {//没有数据
					this.loadingType1 = 2;
					uni.hideNavigationBarLoading();//关闭加载动画
					return;
				}
				// this.arrList1.forEach((item, index) => {
				// 	item.avatar = that.$common.baseUrl + item.avatar;
				// })
				this.arrList1 = this.arrList1.concat(res.data.list);//将数据拼接在一起
				this.count1 = res.data.count;
				this.numV1 = res.data.vipcount;
				this.loadingType1 = 0;//将loadingType归0重置
				uni.hideNavigationBarLoading();//关闭加载动画
			})
		}else if(this.Inv == 1){
			this.page2++;//每触底一次 page +1
			if (this.loadingType2 != 0) {//loadingType!=0;直接返回
				return false;
			}
			this.loadingType2 = 1;
			uni.showNavigationBarLoading();//显示加载动画
			this.$http.post('myteamtuan',{page:this.page2, limit:15}).then(res => {
				if (res.data == null || res.data == '') {//没有数据
					this.loadingType2 = 2;
					uni.hideNavigationBarLoading();//关闭加载动画
					return;
				}
				// this.arrList2.forEach((item, index) => {
				// 	item.avatar = that.$common.baseUrl + item.avatar;
				// })
				this.arrList2 = this.arrList2.concat(res.data.list);//将数据拼接在一起
				this.count2 = res.data.count;
				this.numV2 = res.data.vipcount;
				this.loadingType2 = 0;//将loadingType归0重置
				uni.hideNavigationBarLoading();//关闭加载动画
			})
		}
	},
	watch:{
		Inv(){
			if(this.Inv == 0){
				this.page1 = 1;
				this.loadingType1 = 0;				
			}else if(this.Inv == 1){
				this.page2 = 1;
				this.loadingType2 = 0;
			}
			this.initDat();
		}
	},
	methods: {
		//初始化数据
		initDat(){
			let that = this;
			let url = '';
			if(this.Inv == 0){
				url = 'myteamzhi';
			}else{
				url = 'myteamtuan';
			}
			
			this.$http.post(url ,{page:1, limit:15}).then(res => {
				let newsList =[];
				res.data.list.forEach((key,index) => {
					if(key.avatar != '' && key.avatar != null){
						key.avatar = that.$common.baseUrl + key.avatar;
					}
				});
				if(res.data.length>15){
					for(var i=0;i<15;i++){
						newsList.push(res.data.list[i]);
					}
					if(this.Inv == 0){
						this.arrList1 = newsList;
					}else{
						this.arrList2 = newsList;
					}
				}else{
					if(this.Inv == 0){
						this.arrList1 = res.data.list;
					}else{
						this.arrList2 = res.data.list;
					}
				}
				if(this.Inv == 0){
					this.count1 = res.data.count;
					this.numV1 = res.data.vipcount;
				}else{
					this.count2 = res.data.count;
					this.numV2 = res.data.vipcount;
				}
				uni.hideNavigationBarLoading();
				uni.stopPullDownRefresh();//得到数据后停止下拉刷新
			})
		}
	}
};
</script>

<style>
	page{
		width: 100%;
		height: 100%;
	}
.text-center{
	padding: 0 20%;
	display: flex;
	justify-content: center;
	border-bottom: 20upx solid #F3F1F4;
}
.item-content {
}
.dengji{
	color: #FF4937;
	position: absolute;
	right: 7%;
}
.inv-h{font-size: 30upx;flex: 1;text-align: center;color: #555555;padding: 20upx 0;}
.inv-h-se{color: #FF4937;border-bottom: 5upx solid #FF4937;}
.item-list {
	height: 60px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 90%;
	margin: 0 auto;
	font-size: 16px;
	border-bottom: 1px solid #F3F1F4;
}
.item-name {
	padding-left: 18upx;
	color: #909399;
}
.but-t {
	text-align: center;
	color: #909399;
	font-size: 14px;
}
image {
	width: 60upx;
	height: 60upx;
}
.loading-text{
		height: 80upx;
		line-height: 80upx;
		font-size: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
</style>
